var remove = document.querySelector(".login-tip .cancel");
remove.addEventListener("click", function () {
  document.querySelector(".login-tip").style.display = "none";
});

// 轮播部分
//获取所有要播放的轮播图片
var bannaer_imgs = document.getElementsByClassName("banner-img");
//获取小圆点
var circles = document.getElementsByClassName("btn-circle");
//图片索引
var index = 0;
//一进入图片的 索引就被选中
circles[index].style.backgroundColor = "#fff";
circles[index].style.border = "1px solid #e0e0e0";
// 定时器id索引
var interval_id;
//自动正数播放轮播图
function interval() {
  interval_id = setInterval(function () {
    if (index >= bannaer_imgs.length - 1) {
      index = 0;
    } else {
      index++;
    }
    for (var i = 0; i < bannaer_imgs.length; i++) {
      bannaer_imgs[i].style.opacity = 0;
    }
    bannaer_imgs[index].style.opacity = 1;

    for (var i = 0; i < circles.length; i++) {
      circles[i].style.backgroundColor = "#33333380";
      circles[i].style.border = "1px solid #b0b0b0";
    }
    circles[index].style.backgroundColor = "#fff";
    circles[index].style.border = "1px solid #e0e0e0";
  }, 3000);
}
interval();

//通过右按钮控制循环轮播图
var box_right = document.getElementsByClassName("box-right")[0];
box_right.addEventListener("click", function () {
  clearInterval(interval_id);

  for (var i = 0; i < bannaer_imgs.length; i++) {
    bannaer_imgs[i].style.opacity = 0;
  }

  if (index >= bannaer_imgs.length - 1) {
    index = 0;
  } else {
    index++;
  }
  bannaer_imgs[index].style.opacity = 1;
  for (var i = 0; i < circles.length; i++) {
    circles[i].style.backgroundColor = "#33333380";
    circles[i].style.border = "1px solid #b0b0b0";
  }
  circles[index].style.backgroundColor = "#fff";
  circles[index].style.border = "1px solid #e0e0e0";
  interval();
});

//通过左按钮控制循环轮播图
var box_left = document.getElementsByClassName("box-left")[0];
box_left.addEventListener("click", function () {
  //清空定时器
  clearInterval(interval_id);
  //隐藏所有图片
  for (var i = 0; i < bannaer_imgs.length; i++) {
    bannaer_imgs[i].style.opacity = 0;
  }
  //判断图片的边界值然后作相应处理，此为左按钮控制，所以index<=0时，要为图片索引的最大值，作为循环出现
  //并且因为图片索引为最大值，所以要从后往前调用图片数组索引，所以i--；
  if (index <= 0) {
    index = bannaer_imgs.length - 1;
  } else {
    index--;
  }
  //显示当前index图片
  bannaer_imgs[index].style.opacity = 1;
  //还原所有小圆点
  for (var i = 0; i < circles.length; i++) {
    circles[i].style.backgroundColor = "#33333380";
    circles[i].style.border = "1px solid #b0b0b0";
  }
  //修改当前的小圆点
  circles[index].style.backgroundColor = "#fff";
  circles[index].style.border = "1px solid #e0e0e0";
  //开启定时器，按时间实现循环
  interval();
});

//用小圆点实现控制
for (var i = 0; i < circles.length; i++) {
  circles[i].addEventListener("click", function (event) {
    //获取当前被点击的元素
    var click_circle = event.target;
    //将小圆点的元素集合装为数组
    var circle_list = Array.from(circles);
    //通过indexOf方法获取当前被点击的元素在数组中的索引
    var click_circle_index = circle_list.indexOf(click_circle);
    //将图片索引=小圆点索引绑定
    index = click_circle_index;
    //清空定时器，将interval_id变为0
    clearInterval(interval_id);
    //设置点击后索引判断实现轮播显示图片+修改小圆点样式
    //将所有的图片隐藏
    for (var i = 0; i < bannaer_imgs.length; i++) {
      bannaer_imgs[i].style.opacity = 0;
    }
    //将点击的图片显示
    bannaer_imgs[index].style.opacity = 1;
    //还原小圆点样式
    for (var i = 0; i < circles.length; i++) {
      circles[i].style.backgroundColor = "#33333380";
      circles[i].style.border = "1px solid #b0b0b0";
    }
    //修改当前小圆点的样式
    circles[index].style.backgroundColor = "#fff";
    circles[index].style.border = "1px solid #e0e0e0";
    //调用定时器
    interval();
  });
}

// 放大镜效果

var banner_box = document.querySelector(" .banner-box");
var zoom = document.querySelector(".zoom");
var zoom_big_img = document.querySelector(".zoom-big-img");
var biger_img = document.querySelector(".zoom-big-img img");

banner_box.onmouseover = function () {
  zoom.style.display = "block";
  zoom_big_img.style.display = "block";

  clearInterval(interval_id);

// 获取当前正在播放的照片  // 绑定大图与小图之间的关系
  var imgs_cuurent_list = bannaer_imgs[index].children;
  biger_img.src = imgs_cuurent_list[0].src;
  
};
banner_box.onmouseout = function () {
  zoom.style.display = "none";
  zoom_big_img.style.display = "none"; 
  interval();
};

// 鼠标移动放大镜
banner_box.onmousemove = function (event) {
  var pageX = event.pageX;
  var pageY = event.pageY;
  var offsetTop = banner_box.offsetTop;
  var offsetLeft = banner_box.offsetLeft;
  // 计算鼠标移动的宽高
  var h = zoom.clientHeight / 2;
  var w = zoom.clientWidth / 2;
  // 设置放大镜小框中的的top和left
  var top = pageY - offsetTop - h;
  var left = pageX - offsetLeft - w;

  // 边界值判断
  if (top < 0) {
    top = 0;
  } else if (top > banner_box.clientHeight - zoom.clientHeight) {
    top = banner_box.clientHeight - zoom.clientHeight;
  }

  if (left < 0) {
    left = 0;
  } else if (left > banner_box.clientWidth - zoom.clientWidth) {
    left = banner_box.clientWidth - zoom.clientWidth;
  }

  // 小框内容图片移动
  zoom.style.top = top + "px";
  zoom.style.left = left + "px";

  // 大图片移动
  // 大图和小图之间计算比例，将比例给小图的top等于比例后的大图的top 以此类推

  var y= top / (banner_box.clientHeight - zoom.clientHeight);
  var yy=y*(800-480)
  biger_img.style.top=-yy+"px";

  var x = left / (banner_box.clientWidth - zoom.clientWidth);
  var xx=x*(800-480)
  biger_img.style.left=-xx+"px";
};



// 吸顶效果
window.addEventListener("scroll", function () { 

  var scrollTop = document.documentElement.scrollTop||window.pageXOffset;

  if(scrollTop>205){
    document.getElementById("product-box").classList.remove('product-box-hidden');
  }
  else{
    document.getElementById("product-box").classList.add('product-box-hidden');
  }
});